@import "../../../../style/variables";
@import "../../../../style/functions";

activity-card {
    .activity-collspan {
        background-color: #fff;
        margin-bottom: transVw(60);
        padding: transVw(60) 0 0;
        overflow: hidden;
        max-height: transVw(170);
        transition: all .2s linear;
    }
    .activity-expand {
        max-height: 9999px;
    }
    .activity-group-title {
        padding: 0 transVw(60);
        position: relative;
        line-height: 1;
        margin-bottom: transVw(60);
        &:before {
            content: " ";
            position: absolute;
            height: 100%;
            width: transVw(10);
            background-color: $forgiveColor;
        }
        span {
            font-size: transVw(54);
            color: #1f2029;
            margin-left: transVw(30);
        }
        i {
            display: inline-block;
            width: transVw(54);
            height: transVw(54);
            transition: all .2s ease-in-out;
            float: right;
        }
    }
    .empty-block {
        height: transVw(1);
    }
    .expand-open {
        transform: rotate(0);
        background-image: url("../assets/images/activity/roster-list/arrow-up.png");
        background-size: 100% 100%;
    }
    .expand-close {
        transform: rotate(180deg);
        background-image: url("../assets/images/activity/roster-list/arrow-up.png");
        background-size: 100% 100%;
    }
    .activity-title {
        font-size: transVw(42);
        color: #666666;
        .title-name {
            line-height: transVw(48);
            padding: 0 transVw(60);
            margin: transVw(30) 0;
            span:nth-of-type(1) {
                font-size: transVw(48);
                color: $forgiveColor;
                margin-right: transVw(20);
                display: inline-block;
            }
            span:nth-of-type(2) {
                i {
                    font-style: normal;
                    color: #1f70b0;
                    margin-left: transVw(20);
                }
            }
            & > i {
                display: inline-block;
                width: transVw(36);
                height: transVw(36);
                transition: all .2s ease-in-out;
                float: right;
                position: relative;
                top: transVw(6);
            }
        }
        .black{
            span:nth-of-type(1) {
                color: #666666;
            }
        }
        .activity-detail {
            display: flex;
            justify-content: space-between;
            padding: 0 transVw(60) transVw(30) transVw(60);
            border-bottom: transVw(1) solid #eeeeee;
            div:first-of-type{
                flex: 0 0 auto;
            }
            div:last-of-type{
                text-align: right;
                padding-left: transVw(45);
            }
        }
        .roster-content {
            margin: 0 transVw(60);
            max-height: 0;
            overflow: hidden;
            transition: all .2s linear;
            .item {
                height: transVw(110);
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: transVw(1) solid #eeeeee;
                .key {
                    flex-basis: transVw(380);
                }
                &:first-of-type {
                    border-top: transVw(1) solid #eeeeee;
                }
            }
        }
        .activity-expand {
            max-height: 9999px;
        }
    }
    .has-border {
        border-bottom: transVw(1) solid #eeeeee;
        padding-bottom: transVw(30);
    }

}
